<style lang="scss">
page {
	background-color: #F8F8F8;
}
.notify-list {
	.notify-item {
		background: #FFFFFF;
		border-radius: $uni-border-radius-base;
		padding: 28rpx;
		margin: 16rpx auto;
		.notify-title {
			font-size: 16px;
			line-height: 2.3;
		}
		.notify-content {
			font-size: 14px;
			line-height: 1.5;
			height: 65px;
			overflow-y: scroll;
		}
		.notify-seocnd{
			font-size: 8px;
			margin: 8px auto;
			.notify-badge{
				background: $uni-color-success;
				color: #FFFFFF;
				padding: 2px 4px;
				border-radius: 2px;
			}
		}
		.notify-footer {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-end;
			.btn {
				color: #FFFFFF;
				margin: 0 16rpx;
				line-height: 2;
			}
			.btn-read {
				background: $uni-color-warning;
				
			}
			.btn-delete {
				background: $uni-color-primary;
			}
		}
	}
	
}
</style>
<template>
	<view class="container">
		<view class="notify-list">
			<view class="notify-item" v-for="(item,index) in notifications" :key="item.id">
				<view class="notify-title">
					{{item.title}}
				</view>
				<view class="notify-seocnd">
					<text class="notify-badge">{{item.state==0? '未读':'已读'}}</text>
				</view>
				<view class="notify-content">
					{{item.msg}}
				</view>
				<view class="notify-footer">
					<button v-if="item.state==0" class="btn btn-read" size="mini" @click="setReaded(item)" type="default">已读</button>
					<button class="btn btn-delete" size="mini" @click="deleteNotify(item,index)" type="default">删除</button>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notifications:[],
				pagerequest: {
					maxResultCount: 10,
					skipCount: 0,
				},
				status: 'more'
			};
		},
		onLoad() {
			this.getpage();
		},
		onReachBottom() {
			this.getpage();
		},
		onPullDownRefresh() {
			this.notifications = [];
			this.getpage();
		},
		methods:{
			getpage() {
				this.status = 'loading';
				this.pagerequest.skipCount = this.notifications.length;
				
				this.$http.get("/api/services/app/Notification/GetUserNotifications", {
					params: this.pagerequest
				}).then(res => {
					//console.log(res.data.result.totalCount);
					this.notifications = this.notifications.concat(res.data.result.items.map(n=>{
						return {
							state: n.state,
							id: n.id,
							title: n.notification.data.title,
							msg: n.notification.data.message
						}
					}));
					if (res.data.result.totalCount == this.notifications.length) {
						this.status = "noMore";
					} else {
						this.status = "more";
					}
					uni.stopPullDownRefresh();
				});
			},
			deleteNotify(item,index){
				this.$http.delete('/api/services/app/Notification/DeleteNotification?id=' + item.id)
				.then(res=>{
					this.notifications.splice(index,1);
				});
			},
			setReaded(item){
				this.$http.post('/api/services/app/Notification/SetNotificationAsRead',{
					id: item.id
				}).then(res=>{
					item.state = 1;
				})
			}
		}
	}
</script>


